<template>
  <div class="app-container">
    <el-form
      v-model="listQuery"
      :inline="true"
    >
      <el-form-item>
        <el-input v-model.trim="listQuery.keyword" clearable placeholder="关键词搜索" />
      </el-form-item>
      <el-form-item>
        <el-button @click="getRoleList" type="primary">查询</el-button>
<!--        v-permission="['system-role-add']"  -->
        <el-button @click="openCreateForm" type="primary" icon="el-icon-circle-plus-outline">新增角色</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :loading="listLoading"
      :data="list"
      stripe
    >
      <el-table-column label="序号" type="index" />
      <el-table-column label="角色ID" prop="id" />
      <el-table-column label="角色名称" prop="name" min-width="100" />
      <el-table-column label="角色标识符" prop="code" min-width="350" />
      <el-table-column label="权限项" prop="node_names" min-width="350" />
      <el-table-column label="角色状态">
        <template slot-scope="{row}">
          <el-switch v-model="row.state" :active-value="1" :inactive-value="0" :disabled="true" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-link @click="openUpdateForm(row)" :underline="false" type="primary" style="margin-right: 10px;">编辑</el-link>
          <el-link @click="deleteRole(row)" :underline="false" type="danger">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination @pagination="getRoleList()" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" />

    <el-dialog
      :title="roleDialogTypeMap[roleDialogType]"
      :visible.sync="roleDialogIsShow"
      :close-on-click-modal="false"
    >
      <el-form
        ref="roleForm"
        :model="roleForm"
        :inline="false"
        :rules="roleRules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="角色名称" required prop="name">
          <el-input v-model.trim="roleForm.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色标识符" required prop="code">
          <el-input v-model.trim="roleForm.code" placeholder="请输入角色标识符" />
        </el-form-item>
        <el-form-item label="角色状态">
          <el-radio v-model="roleForm.state" :label="1">启用</el-radio>
          <el-radio v-model="roleForm.state" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item label="授权节点">
          <el-tree
            ref="nodeTree"
            :data="nodes"
            :default-checked-keys="roleForm.node_ids"
            node-key="id"
            show-checkbox
            :highlight-current="true"
            :check-strictly="false"
            :props="treeProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialogIsShow=false">返回</el-button>
        <el-button type="primary" @click="roleDialogType==='create'?createRole():updateRole()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, createRole, updateRole, deleteRole } from '@/api/system/role'
import { Message, MessageBox } from 'element-ui'
import Pagination from '@/components/Pagination/index.vue'
import { getNodes } from '@/api/system/node'
export default {
  name: 'SettingSystemRoleIndex',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        keyword: '',
        state: null,
        page: 1,
        page_size: 20
      },
      roleDialogTypeMap: {
        create: '新增角色',
        update: '编辑角色'
      },
      roleDialogType: 'create',
      roleDialogIsShow: false,
      roleFormSubmitLoading: false,
      roleForm: {
        id: 0,
        name: '',
        code: '',
        state: 1,
        node_ids: []
      },
      roleRules: {
        name: [{ required: true, message: '角色名称必须填写', trigger: 'trigger' }],
        code: [{ required: true, message: '角色标识符必须填写', trigger: 'trigger' }]
      },
      selectProps: {
        expandTrigger: 'click',
        multiple: true,
        emitPath: false,
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      nodes: [],
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getRoleList()
    this.getNodes()
  },
  methods: {
    getNodes() {
      getNodes().then((res) => {
        this.nodes = res.data
        console.log(this.nodes)
      }).catch((res) => {})
    },
    getRoleList() {
      this.listLoading = true
      getRoleList(this.listQuery).then((res) => {
        this.list = res.data.list
        this.total = res.data.pager.total
        this.listQuery.page = res.data.pager.page
        this.listQuery.page_size = res.data.pager.page_size
      }).catch((res) => {})
      this.listLoading = false
    },
    resetRoleFormData() {
      this.roleForm = {
        id: 0,
        name: '',
        code: '',
        state: 1,
        node_ids: []
      }
    },
    openCreateForm() {
      this.resetRoleFormData()
      this.roleDialogType = 'create'
      this.roleDialogIsShow = true
    },
    openUpdateForm(row) {
      row.node_ids = row.node_ids ? row.node_ids.split(',') : []
      this.roleForm = row
      this.roleDialogType = 'update'
      this.roleDialogIsShow = true
    },
    createRole() {
      this.$refs['roleForm'].validate((res) => {
        this.roleFormSubmitLoading = true
        if (res) {
          this.roleForm.node_ids = this.$refs.nodeTree.getCheckedKeys()
          createRole(this.roleForm).then((res) => {
            this.getRoleList()
            this.roleDialogIsShow = false
            Message.success(res.msg)
          }).catch((res) => {})
        }
        this.roleFormSubmitLoading = false
      })
    },
    updateRole() {
      this.$refs['roleForm'].validate((res) => {
        this.roleFormSubmitLoading = true
        if (res) {
          this.roleForm.node_ids = this.$refs.nodeTree.getCheckedKeys()
          updateRole(this.roleForm).then((res) => {
            this.getRoleList()
            this.roleDialogIsShow = false
            Message.success(res.msg)
          }).catch((res) => {})
        }
        this.roleFormSubmitLoading = false
      })
    },
    deleteRole(row) {
      MessageBox.confirm(`确定删除【${row.name}】吗？删除后无法恢复`, '温馨提示', {
        type: 'warning'
      }).then(() => {
        deleteRole({ id: row.id }).then((res) => {
          this.getRoleList()
          Message.success(res.msg)
        }).catch((res) => {})
      }).catch(() => {
        Message.info('已取消')
      })
    }
  }
}
</script>

<style scoped>
.el-cascader {
  width: 100%;
}
</style>
